<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
	xmlns:p="http://primefaces.org/ui">
	
	<ui:composition template="/layout/maintemplate.xhtml">
		<ui:define name="maincontent">
			<h:form id="searchMediaItemForm">
				<h:panelGroup id="searchInputPanel" layout="block" styleClass="ui-search-panel">
					<h:panelGroup id="searchInputPanelInnerPanel" layout="block" styleClass="ui-search-panel-inner">
						<p:inputText value="#{searchMediaItemBean.title}" styleClass="ui-search-input"
							pt:placeholder="#{messages.search_mediaitem_inputFieldPlaceHolder}">
							<!-- possible events keydown/keypress/keyup -->
							<p:ajax event="keyup" process="@this" update="searchResultPanel" listener="#{searchMediaItemBean.searchForMediaItems}"/>
						</p:inputText>
						<i id="mediaSearchSearchIconId" class="fa fa-search fa-3x ui-search-icon" />
					</h:panelGroup>
					FIXME: In Zukunft will ich hier einen Umschalter zwischen "Einfacher Suche" und "Erweiterter Suche" haben...
				</h:panelGroup>
				<h:panelGroup id="searchResultPanel" layout="block" styleClass="ui-searchresult-panel">
					<p:dataGrid id="searchResultGrid" value="#{searchMediaItemBean.searchResult}" var="mediaItem" rowIndexVar="curRowIdx" 
							columns="1" rendered="#{not empty searchMediaItemBean.searchResult}" styleClass="ui-searchresult-datagrid">
						<div id="searchMediaItemForm:searchResultGrid:#{curRowIdx}:elementContainer" onclick="document.getElementById('searchMediaItemForm:searchResultGrid:#{curRowIdx}:myhiddenCmdLink').click();" 
								class="ui-searchresult-display-element">
							<h:panelGrid columns="2" styleClass="ui-searchresult-display-element-table" 
									columnClasses="ui-searchresult-display-element-col1, ui-searchresult-display-element-col2">
								<h:column>
									<p:graphicImage id="coverPicture" value="#{searchMediaItemBean.loadImageWithUseOfRequestParameter()}" height="100px" cache="false" 
											rendered="#{not empty mediaItem.pictures}">
										<f:param name="mediaItemId" value="#{mediaItem.id}" />
									</p:graphicImage>
								</h:column>
								<h:column>
									<h:panelGroup style="float:left;">
										<h:outputText value="#{mediaItem.title}" />
									</h:panelGroup>
									<h:panelGroup style="float: right;">
										<h:outputText value="#{messages.search_mediaitem_showTrailerLabel}:&#160;" />
										<h:outputLink value="#{mediaItem.trailerLink}" target="_blank">
											<h:outputText value="#{messages.trailer}" />
										</h:outputLink>
									</h:panelGroup>
									<h:panelGroup layout="block" style="clear: both;" />
									<p>
										<h:outputText value="#{mediaItem.description}" />
									</p>
								</h:column>
							</h:panelGrid>
							<p:commandLink id="myhiddenCmdLink" style="display: none;" value="not_visible" process="@this" update="@this">
<!-- 								<f:setPropertyActionListener target="#{searchMediaItemBean.selectedMediaItem}" value="#{curMediaItem}" /> -->
							</p:commandLink>
						</div>
					</p:dataGrid>
				</h:panelGroup>
			</h:form>
		</ui:define>
	</ui:composition>
	
</html>